<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="app">
        <input type="button" @click="change" value="按钮">
        <span ref="s">{{msg}}</span>
    </div>

    <input type="button" id="remove" value="卸载组件">
</body>
<script src="../vue.global.js"></script>
<script>

    const { createApp, ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated } = Vue;

    const app = createApp({
        setup(){
            const msg = ref("hello world");
            const s = ref(null);

            function change(){
                msg.value = Date.now();
            }
            
            onBeforeMount(()=>{
                console.log("挂载前", s.value)
            })
            onMounted(()=>{
                console.log("挂载后，可以进行DOM操作", s.value);
            })
            onBeforeUpdate(()=>{
                console.log("DOM更新前", s.value.innerHTML);
            })
            onUpdated(()=>{
                console.log("DOM更新后", s.value.innerHTML);
            })
            onBeforeUnmount(()=>{
                console.log("组件被卸载前", s.value.innerHTML);
            })
            onUnmounted(()=>{
                console.log("组件被卸载后", s.value);
            })

            return {msg, change, s}
        }
    })

    app.mount(".app");

    remove.onclick = function(){
        app.unmount();
    }
    
</script>
</html>